會寫HTML了，可是放在瀏覽器看起來卻很單調，接下來就可以用CSS幫它做樣式，之前從CSS zen garden可以看出，CSS的功能是很強大的，可以做出各式各樣的視覺樣式。
CSS的套用方法，可以直接寫入html檔，也可以另外建立css檔來引入。通常建議另外引入，否則html與css的語法混在一起，可讀性會變得很低。而且最重要的是，如果都直接寫入html，就沒辦法豐富地套用多個層次的樣式(這跟之後要講的選擇器與權重有關)。
用style屬性來指定字的顏色為紅色，寫在開始標籤內，元素的內容就會改變樣式。
<p>我是段落</p>
<p style="color: red;">我是段落</p>
<p>我是段落</p>
缺點：
還記得我們之前學到的<head>元素嗎？文檔內的頭腦，用來裝載元數據，並影響<body>的內容展示。我們可以在這裡加<style>元素，並在元素內寫入要指定的樣式（看不懂怎麼指定的沒關係，下一篇會開始講選擇器）。
關於<style>元素：
用來寫入樣式，通常是寫css樣式，所以沒有指定類型時，它的type預設值為text/css，也就是css的寫入方式。
<style type="text/css">
缺點：
這是目前最普遍的做法，它的優點是：
然後在<head>元素內，用<link>元素引入css檔內寫的樣式。(也可以引入<body>內，但通常引入<head>是比較好的。因為關乎整個文檔被瀏覽器讀取的順序。)
這個方法可以寫在html檔，它特殊在於也可以用在css檔內。只是這個方法通常比較少人使用，我目前也沒有用到過@import，期待未來會發現它的奧妙之處。
注意：它必須先於其他的樣式描述，除了@charset之外。
@import的語法有兩種，這兩個的效果都一樣。
@import “css檔”
@import url("css檔")
用在html檔內：
建立一個css檔，並取名為style.css，然後透過<style>元素匯入。它必須寫於其他樣式描述，例如文檔中的 p{ color: blue }。
<head>
<style>
@import "style.css";
@import url("style.css");
p{
color: blue;
}
</style>
</head>
用在css檔內：
一樣除了@charset外，要寫在其它樣式之前。(否則不會傳送@import的請求)
@charset: UTF-8;
@import "style.css";
@import url("style.css");
.nav{
background-color: pink;
}
今天的筆記到這裡，明天見～
*有任何錯誤或描述不夠精準之處，歡迎指教，非常感謝。
iThome鐵人賽
看影片追技術